<template>
  <div class="commission">
    <div class="title">
      {{detailsData.allowanceName}}
    </div>
    <div class="total flex">
      <div class="info">
        <div><span>发放月份：{{detailsData.allowanceMonth}}</span><span
            style="margin-left:20px;">津贴类型：{{ detailsData.allowanceTypeStr}}</span></div>
        <div>
          共{{detailsData.peopleCount?detailsData.peopleCount:0}}人，津贴总额：{{detailsData.allowanceMoney?detailsData.allowanceMoney:0}}元
        </div>
      </div>
      <div class="btns flex">
        <Button type="primary" @click='onImport'>数据导入</Button>
        <Button type="primary" @click='onAdd'>新增</Button>
        <Button @click='onClear'>清空列表</Button>
        <Button type="primary" @click='onSubmit'>提交</Button>
      </div>
    </div>
    <div class="qie">
      <dt-grid ref="table" :columns="columns" :list="list" />
    </div>
    <import-modal ref='import' @success='onSuccess'></import-modal>
    <create-person ref='createPerson' @success='createPersonSuccess'></create-person>
    <allowance-sbumit ref='allowanceSbumit' :detailsData="detailsData"
      @success='allowanceSbumitSuccess'></allowance-sbumit>

  </div>
</template>

<script>
  import columnOpt from './opt/allowanceLaunchColumn'
  import importModal from './components/importModal.vue'
  import createPerson from './components/createPreson.vue'
  import allowanceSbumit from './components/allowanceSubmit.vue'
  import incentiveMgr from '@/biz/bonus/incentive'
  export default {
    components: {
      importModal,
      createPerson,
      allowanceSbumit,
    },
    data() {
      return {
        detailsData: {},

        columns: [],
        list: [],
        daList: [],
      }
    },
    mounted() {
      this.columns = columnOpt.options(this)
      this.getDetails()
    },
    methods: {
      updataPrice(info, val) {
        console.log(info, val, 'info1');
        let _index = this.daList.findIndex((item) => {
          return item.id == info.id
        })

        // this.$set(info, 'actualMoney', (this.daList[_index].actualMoney + val).toFixed(2))

        info.actualMoney = (this.daList[_index].actualMoney + val).toFixed(2)
        // this.list[_index].actualMoney = (this.daList[_index].actualMoney + val).toFixed(2)

        console.log(info, 'info');

        let priceZong = null
        this.detailsData.boAllowanceDetailInfoList.forEach((item) => {
          priceZong += Number(item.actualMoney)
        })

        this.detailsData.allowanceMoney = priceZong.toFixed(2)
      },

      allowanceSbumitSuccess() {
        this.$router.go(-1)
        this.$store.commit('deleteroutefun', '项目津贴发起')
      },
      onFilter(data) {
        this.filterInfo = { ...data }
        this.getList()
      },
      onImport() {
        this.$refs.import.show()
      },
      onAdd() {
        this.$refs.createPerson.create()
      },
      onClear() {
        this.$Modal.confirm({
          title: '删除',
          content: '<p>确认清空？</p>',
          onOk: () => {
            let params = {
              allowanceId: this.$route.query.allowanceId,
            }
            incentiveMgr.emptyBonusAllowanceDetail(params).then((res) => {
              this.getDetails()
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了清空。')
          },
        })
      },
      onSubmit() {
        if (
          this.detailsData.boAllowanceDetailInfoList &&
          this.detailsData.boAllowanceDetailInfoList.length
        ) {
          let flag = this.detailsData.boAllowanceDetailInfoList.some((item) => {
            if (item.adjustMoney) {
              return item.remark == null || ''
            }
          })
          console.log(flag, this.detailsData.boAllowanceDetailInfoList, 'flag')
          if (flag) {
            this.$Message.warning('请补充修改调整金额的备注后进行提交。')
          } else {
            this.$refs.allowanceSbumit.create()
          }
        } else {
          this.$Message.warning('请添加数据后进行提交。')
        }
      },

      detailsDelete(val) {
        this.$Modal.confirm({
          title: '删除',
          content: '<p>确认删除该选项？</p>',
          onOk: () => {
            let params = {
              id: val.id,
            }
            incentiveMgr.delBonusAllowanceDetail(params).then((res) => {
              this.getDetails()
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了删除。')
          },
        })
      },
      onSuccess() {},
      createPersonSuccess() {
        this.getDetails()
      },
      getDetails() {
        let params = {
          allowanceId: this.$route.query.allowanceId,
        }
        incentiveMgr.selectBonusAllowanceInfo(params).then((res) => {
          console.log(res, '项目津贴')
          this.daList = this.$tool.deepClone(res.boAllowanceDetailInfoList)
          this.detailsData = res
          this.list = this.detailsData.boAllowanceDetailInfoList
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;

    .title {
      margin-bottom: 20px;
      font-size: 20px;
    }

    .info {
      line-height: 2;
    }

    .total {
      justify-content: space-between;

      Button {
        margin-left: 10px;
      }
    }
  }

  .qie {
    margin-top: 20px;
  }
</style>